<script setup>
import { ref } from 'vue'

// 定义响应式数据
const titles = ref([])
const isExtracting = ref(false)

// 提取文章标题的函数
function extractTitles() {
  isExtracting.value = true
  
  // 使用提供的选择器获取文章标题链接
  const titleElements = document.querySelectorAll('div[class="entry-list list"] li[class="item"] a[class="jj-link title"]')
  
  // 提取标题文本
  const extractedTitles = []
  titleElements.forEach((element, index) => {
    const title = element.textContent.trim()
    extractedTitles.push(title)
    console.log(`标题 ${index + 1}: ${title}`)
  })
  
  // 将标题列表发送到控制台
  console.log('所有文章标题:', extractedTitles)
  
  // 发送标题到background script并保存到storage
  chrome.runtime.sendMessage({
    type: 'SAVE_TITLES',
    titles: extractedTitles
  }, (response) => {
    if (response && response.success) {
      console.log('标题已成功保存到storage');
    }
  });
  
  // 更新响应式数据
  titles.value = extractedTitles
  isExtracting.value = false
}
</script>

<template>
  <div>
    <button @click="extractTitles" :disabled="isExtracting" class="floating-button">
      {{ isExtracting ? '采集中...' : '开始采集文章标题' }}
    </button>
    
    <div v-if="titles.length > 0" class="titles-container">
      <h2>采集到的标题:</h2>
      <ul>
        <li v-for="(title, index) in titles" :key="index">
          {{ title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style>
.floating-button {
  position: absolute;
  left: 40px;
  top: 60px;
  z-index: 99999;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.floating-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.titles-container {
  position: absolute;
  left: 40px;
  top: 120px;
  z-index: 99999;
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  max-height: 400px;
  overflow-y: auto;
}

.titles-container ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.titles-container li {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
</style>
